
<style scoped>
 .payment {
   /*display: inline-block;*/
   position: absolute;
   /*background-color: gray;*/
   width: 100%;
   height: 60%;
   top: 0;
}
 .payment-headimg {
   /*background-color: #8b8f92;*/
   height: 50px;
   text-align: center;
 }
 .payment-headimg img {
   height: 26px;
   border: none;
   margin-top: 24px;
 }
 .payment-headtitle {
   /*background-color: red;*/
   text-align: center;
   line-height: 40px;
   font-size: 16px;
   width: 100%;
 }
.payment-input {
  height: 60px;
  margin-left: 20px;
  margin-right: 20px;
  font-size: 40px;
  background-color: gray;
  border: none;
  padding-top: 10px;
  margin-top:8px;
  text-align: center;
}
.input-span {
  /*background-color: white;*/
}
.payment-total {
  margin-right: 20px;
  margin-left: 20px;
}
.payment-left {
  float: left;
}
.totalvalue {
  float: right;
}

.footer {
  position: fixed;
  background-color: red;
  bottom: 0;
  height: 30%;
  width: 100%;
}
</style>

<template lang="html">
  <section >
  <div class = "payment">
    <div class = "payment-headimg">
        <img :src="logoSrc">
    </div>
    <div class = "payment-headtitle">I am ratings</div>
    <div class = "payment-input"><span class="input-span">100</span></div>
    <div class = "payment-total"><div class = "payment-left">Total Amount</div><div class = "totalvalue">=$ 0</div></div>
 </div>
  <div class="footer">

  </div>

 </section>

</template>

<script>
import logoImg from '../../static/cashier/supay.png'
export default {
  components: {

  },
  computed: {
    logoSrc () {
      return logoImg
    }
  }
}
</script>
